<template>
  <div>
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">我的题库</a></el-breadcrumb-item>
        <el-breadcrumb-item>题库详情</el-breadcrumb-item>
        <el-breadcrumb-item>题目详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!--  显示详情  -->
    <div v-if="!change">
      <div class="detail">
        <el-divider content-position="left">知识点</el-divider>
        <span class="text">{{questionDetail.knowledgePointName}}</span>
        <el-divider content-position="left">题干</el-divider>
        <span class="text">{{questionDetail.stem}}</span>
        <!--   单选选项   -->
        <div class="text" v-if="questionDetail.type === 'radio'">A.{{questionDetail.radio[0]}}</div>
        <div class="text" v-if="questionDetail.type === 'radio'">B.{{questionDetail.radio[1]}}</div>
        <div class="text" v-if="questionDetail.type === 'radio'">C.{{questionDetail.radio[2]}}</div>
        <div class="text" v-if="questionDetail.type === 'radio'">D.{{questionDetail.radio[3]}}</div>
        <!--   多选选项   -->
        <div class="text" v-if="questionDetail.type === 'multiple'">A.{{questionDetail.multiple[0]}}</div>
        <div class="text" v-if="questionDetail.type === 'multiple'">B.{{questionDetail.multiple[1]}}</div>
        <div class="text" v-if="questionDetail.type === 'multiple'">C.{{questionDetail.multiple[2]}}</div>
        <div class="text" v-if="questionDetail.type === 'multiple'">D.{{questionDetail.multiple[3]}}</div>
        <el-divider content-position="left">答案</el-divider>
        <div class="text" v-if="questionDetail.type === 'radio'">{{questionDetail.radioAnswer}}</div>
        <div class="text" v-if="questionDetail.type === 'multiple'">{{questionDetail.multipleAnswer}}</div>
        <div class="text" v-if="questionDetail.type === 'filling'">{{questionDetail.fillingAnswer}}</div>
        <div class="long-text" v-if="questionDetail.type === 'shortAnswer'">{{questionDetail.shortAnswer}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {getKnowledgePoints, findKnowledgePointByID, queryById} from '../../../api/questionDetail'
export default {
  name: 'index',
  data () {
    return {
      change: false,
      postDetail: {
        id: 2,
        subjectId: 1,
        questionType: 'radio',
        knowledgePointId: 2,
        teacherId: 1,
        answer: 'C',
        questionStem: 'B 类地址子网掩码为 255.255.255.248 ，则每个子网内可用主机地址数为（ ） A. 10 B. 8 C. 6 D. 4',
        createTime: '2022-03-24T07:17:32.000+00:00',
        updateTime: '2022-03-24T07:17:32.000+00:00'
      },
      questionDetail: {
        type: 'radio',
        stem: '？',
        knowledgePointName: '',
        knowledgePointId: '',
        // 选项
        radio: [
          '《骆驼祥子》', '《茶舍》', '《雷雨》', '《XXX》'
        ],
        multiple: [
          '多选选项A', '多选选项B', '多选选项C', '多选选项D'
        ],
        // 类型不同答案不同
        radioAnswer: 'D',
        multipleAnswer: 'ABD',
        fillingAnswer: '右极限',
        shortAnswer: '曲线上一点M沿曲线无限远离原点或无限接近间断点时，如果M到一条直线的距离无限趋近于零，那么这条直线称为这条曲线的渐近线。'
      },
      // 题型
      types: [
        {
          name: '单选',
          value: 'radio'
        },
        {
          name: '多选',
          value: 'multiple'
        },
        {
          name: '填空',
          value: 'filling'
        },
        {
          name: '简答',
          value: 'shortAnswer'
        }
      ],
      // 知识点
      knowledgePoints: [
        {id: 1, name: '静态数据', subjectId: 1}
      ],
      // 前端限制
      rules: {
        type: [
          { required: true, message: '请选择题型', trigger: 'change' }
        ],
        stem: [
          { required: true, message: '请输入题干', trigger: 'blur' },
          { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    this.getKnowledgePoint()
    this.getDetail(this.$route.query.id)
  },
  methods: {
    // 获取题目信息
    getDetail (detailId) {
      let that = this
      // 获取postDetail
      // 等待页面传值
      queryById(detailId)
        .then(res => {
          if (res.data.errorCode === 0) {
            console.log(res.data)
            that.postDetail = res.data.data.list[0]
            this.transfer(that)
          } else {
            this.$message.error(res.data.message)
          }
        })
    },
    // 转化消息
    transfer (that) {
      // 转化题干
      // 获取知识点名称
      findKnowledgePointByID(that.postDetail.knowledgePointId).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          that.questionDetail.knowledgePointId = res.data.data.id
          that.questionDetail.knowledgePointName = res.data.data.name
        } else {
          this.$message.error(res.data.message)
        }
      })

      // 获取题型、题干、答案
      if (that.postDetail.questionType === 'radio') {
        that.questionDetail.type = 'radio'

        let stem = JSON.parse(that.postDetail.questionStem)
        that.questionDetail.stem = stem.stem
        that.questionDetail.radio[0] = stem.options.A
        that.questionDetail.radio[1] = stem.options.B
        that.questionDetail.radio[2] = stem.options.C
        that.questionDetail.radio[3] = stem.options.D

        that.questionDetail.radioAnswer = that.postDetail.answer

        console.log(that.questionDetail)
      } else if (that.postDetail.questionType === 'multiple') {
        that.questionDetail.type = 'multiple'

        let stem = JSON.parse(that.postDetail.questionStem)
        that.questionDetail.stem = stem.stem
        that.questionDetail.multiple[0] = stem.options.A
        that.questionDetail.multiple[1] = stem.options.B
        that.questionDetail.multiple[2] = stem.options.C
        that.questionDetail.multiple[3] = stem.options.D

        that.questionDetail.multipleAnswer = that.postDetail.answer

        console.log(that.questionDetail)
      } else if (that.postDetail.questionType === 'filling') {
        that.questionDetail.type = 'filling'

        let stem = JSON.parse(that.postDetail.questionStem)
        that.questionDetail.stem = stem.stem
        that.questionDetail.fillingAnswer = that.postDetail.answer

        console.log(that.questionDetail)
      } else if (that.postDetail.questionType === 'shortAnswer') {
        that.questionDetail.type = 'shortAnswer'

        let stem = JSON.parse(that.postDetail.questionStem)
        that.questionDetail.stem = stem.stem
        that.questionDetail.shortAnswer = that.postDetail.answer

        console.log(that.questionDetail)
      }
    },
    getKnowledgePoint () {
      let that = this
      getKnowledgePoints(that.postDetail.subjectId).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          that.knowledgePoints = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 进入查看模式
    cancel () {
      this.change = false
    }
  }
}
</script>

<style scoped>
  .breadcrumb {
    width: 1000px;
    height: auto;
    padding-top: 20px;
    padding-left: 20px;
  }

  .changeForm {
    width: 1000px;
    margin-top: 50px;
    margin-left: 50px;
  }

  .form-item {
    float: left;
  }
  .detail {
    margin-top: 20px;
    margin-left: 20px;
    text-align: left;
  }
  .text {
    margin-top: 10px;
    height: 30px;
  }
  .long-text {
    margin-top: 10px;
    height: auto;
  }
</style>
